<script lang='ts' setup>
import {Site} from "@/config/base";
import router from "@/router";
import {onMounted, ref} from "vue";
import {getUuid} from "@/utils/common.methods.ts";
import {appNotify, NotifyType} from "@/models/app.notify.ts";
import {appRef} from "@/models/app.ref.ts";
import {UserInfo} from "@/models/user";
import User from '@/components/User.vue'
import {handleAssetsUrl} from "@/utils/fileConvert.ts";

const menus = ref([
  {
    name: "免费缘由",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/purpose.md",
  },
  {
    name: "项目说明",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/README.md",
  },
  {
    name: "支持我们",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/Support.md",
  },
  {
    name: "隐私保护",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/security.md",
  },
  {
    name: "企业合作",
    href: "https://wj.qq.com/s2/13088887/7112/",
  }
])


const isMenu = ref(false);
const isScrollTop = ref(false);
onMounted(() => {
  window.addEventListener("scroll", onScroll);
  window.addEventListener('touchmove', onScroll);
  document.body.removeAttribute('arco-theme');
});

function onScroll() {
  const scrollTop = document.documentElement.scrollTop || window.pageYOffset;
  if (scrollTop > 20) {
    isScrollTop.value = true;
  } else {
    isScrollTop.value = false;
  }
}

function toIndex(): void {
  router.push('/');
}


const user = ref({} as UserInfo)
const id = getUuid();

onMounted(() => {
  appNotify.addListener(NotifyType.UserInfo, updateUserInfo, 'user-info' + id);
  updateUserInfo();
})

function updateUserInfo(): void {
  user.value = appRef.user.data;
}

</script>
<template>
  <nav class="nav flex" :class="{ 'nav-small': isScrollTop || isMenu }">
    <div class="menus pc flex">
      <div class="left flex">
        <img class="logo animated zoomIn" src="@/assets/logo2.webp" alt="" @click="toIndex">
        <!-- <img class="logo animated zoomIn" :style="{ display: isScrollTop ? 'block' : 'none' }" src="@/assets/logo.webp"
          alt=""> -->
        <!-- <div class="flex">
          <img height="50" src="@/assets/logo.webp" alt="">
          <img src="@/assets/logo-text.webp" height="50" alt="zaiwen">
        </div> -->

        <!-- <div class="menu" v-for="item in menus" :key="item.name" a :href="item.href"> {{ item.name }} </div> -->
        <a class="menu" :href="item.href" target="_black" v-for="item in menus"
           :key="item.name">{{ item.name }}</a>
      </div>
      <div class="right flex">
        <div class=" flex">
          <!-- <a class="menu flex" href="tel:13041132817">
            <img class="phone" src="https://www.yingdao.com/img/nav_tel.webp" alt="">13041132817
          </a> -->
        </div>
        <!--        <a href="https://zaiwen-chattests.feishu.cn/docx/AvFGd6KX8o8U7QxjY63c0jBGnlT"-->
        <!--           target="_blank"-->
        <!--           class=" btn">使用指南</a>-->
        <img src="@/assets/icons/home/help.webp"><span class="help">
          <a href="https://zaiwen-chattests.feishu.cn/docx/AvFGd6KX8o8U7QxjY63c0jBGnlT"
             target="_blank">帮助中心</a>
        </span>


          <a-popover title="公众号二维码">
            <div class="flex">
              <div class="line"></div>
              <img src="@/assets/images/contact/wechat.svg" style="height: 24px">
              <span style="margin-left: 4px">公众号</span>
            </div>
            <template #content>
              <a-image
                  width="200"
                  :src="handleAssetsUrl('@/assets/images/index/wechat.jpg')"
              />
            </template>
          </a-popover>


        <div class="line"></div>
        <User theme="index"></User>
        <!-- <img src="@/assets/icons/home/user.svg">
        <span class="user">
          <a href="#" target="_self">{{ user?.nick || '默认用户' }}</a>
        </span> -->

      </div>
    </div>
    <div class="menus mobile flex">
      <div class="left flex">
        <img class="logo animated zoomIn" src="@/assets/logo2.webp" alt="" @click="toIndex">
        <span class="website_url">zaiwen.top</span>
        <!--        <icon-close v-if="isMenu" @click="isMenu = false" size="20"/>-->
        <!--        <icon-menu v-else @click="isMenu = true" size="20"/>-->
      </div>
      <div class="right flex">
        <!--        <a href="https://zaiwen-chattests.feishu.cn/docx/AvFGd6KX8o8U7QxjY63c0jBGnlT"-->
        <!--           target="_blank"-->
        <!--           class=" btn">使用指南</a>-->
        <icon-close v-if="isMenu" @click="isMenu = false" size="20"/>
        <icon-menu v-else @click="isMenu = true" size="20"/>
      </div>
    </div>
    <div v-if="isMenu" class="menu-list flex-c animated fadeIn" :class="{ 'mume-show': isMenu }">
      <!-- <div class="menu animated bounceInRight" v-for="item in menus" :key="item.name" a :href="item.href"> {{ item.name }}
      </div> -->
      <a class="menu animated bounceInRight" :href="item.href" target="_black" v-for="item in menus"
         :key="item.name">
        {{ item.name }}
      </a>
    </div>
    <div class="mume-background" @click="isMenu = false" :class="{ 'mume-show': isMenu }"></div>
  </nav>
</template>
<style lang='scss' scoped>
.nav {
  justify-content: center;
  z-index: 2;
  position: fixed;
  top: 0;
  background: transparent;
  width: 100vw;

  .menus {
    width: 100%;
    justify-content: space-between;


    .line {
      width: 1px;
      height: 10px;
      background: #D6D6D6;
      margin: 0 24px;
    }

    .btn {
      width: 88px;
      height: 30px;
      margin-left: 2vw;
      color: #fff;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      background-image: linear-gradient(270deg, #165dff, #165dff96);
      border-radius: 15px;
      transition: all 0.3s;

      &:hover {
        background-image: linear-gradient(270deg, #165dff96, #165dff96);
      }
    }
  }

  .pc {
    max-width: 1600px;
    width: 80%;
    padding: 0 24px;
    height: 60px;

    .logo {
      width: 49px;
      height: 46px;
    }

    .menu {
      position: relative;
      transition: all 0.5s;
      color: #1E2025;
      font-family: Source Han Sans CN;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
      /* 157.143% */
      margin-left: 32px;

      &::after {
        content: "";
        display: none;
        width: 0;
        height: 4px;
        background: linear-gradient(270deg, #31b6f496, #31b6f496);
        position: absolute;
        bottom: -8px;
        left: 0;
        animation: zoomIn 0.3s ease forwards;
      }

      &:hover {
        color: #2483ff;

        &::after {
          display: inline-block;
        }
      }

      @keyframes zoomIn {
        0% {
          width: 0;
          left: 50%;
        }

        100% {
          width: 100%;
          left: 0;
        }
      }


    }

    .help {
      margin-left: 6px;
      white-space: nowrap;
    }

    .user {
      margin-left: 8px;
    }
  }

  .mobile {
    display: none;
    margin: 0;

    .btn {
      margin-right: 0px;
    }

    .logo {
      width: 71.54px;
      height: 67.16px;
      display: block;
    }

    .website_url {
      color: #000;
      text-align: justify;
      font-family: "PingFang SC";
      font-size: 15px;
      opacity: 0.7;
    }

    .right {
      padding-right: 14px;
    }
  }

  .menu-list {
    transition: all 0.3s;
    z-index: 2;
    position: absolute;
    top: 61px;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 18px 24px;
    display: none;
    background: #fff;

    .menu {
      display: block;
      color: rgba(25, 37, 68, 0.6);
      font-size: 16px;
      line-height: 40px;
      width: 100%;
      text-align: center;
    }
  }

  .mume-background {
    transition: all 0.2s;
    position: fixed;
    top: 61px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    display: none;
  }

  .mume-show {
    display: flex;
  }

  @media screen and (max-width: 750px) {
    .pc {
      display: none;
    }

    .mobile {
      display: flex;
    }
  }
}

.nav-small {
  background: #fff;
  border-bottom: 1px solid #ececec;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 6%);
  transition: all 0.3s;
}
</style>
